<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <style>
        .content{
            width: 500px;
            height: 500px;
            border: 1px solid #b9ccdd; 
            margin: 50px auto;
            box-sizing: border-box;
            padding: 50px;
            
            h1{
                text-align: center;
            }
            input{
                padding: 10px;
                border: 1px solid #e7e8ec;
                border-radius: 5px;
                background: white;
                width: 100%;
                box-sizing: border-box;
            }
            .lable{
                margin: 20px 0;
                
            }
            button{
                background-color: #409efe;
                color: white;
                border-radius: 20px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                width: 90%;
                border: 1px solid #409efe;
                display: block;
                margin: 0 auto;
               
            }

        }
        .showtext{
            text-align: right;
            font-size: 12px;
            span{
                color: #409efe;
            }
        }

    </style>
</head>
<body>
    <div class="content">
        <h1>记事本</h1>
        
        <div class="lable">用户名：<input class="username" placeholder="请输入用户名" type="text"></div>
        <div class="lable">密码：<input class="password" placeholder="请输入密码" type="text"></div>
        <div class="lable">姓名：<input class="names" placeholder="请输入姓名" type="text"></div>
        <button onclick="register()">注册</button>
        <p class="showtext">已有账号 <span>去登录</span></p>

    </div>

    <script>
        // 注册事件
        function register(){
            // 获取输入框的内容
            $.ajax({
                url:'http://192.168.123.152:8000/users/register',
                type:'post',
                data:{
                    user_name:$('.username').val(),
                    password:$('.password').val(),
                    real_name:$('.names').val()
                },
                success:function(res){
                    if (res.code !=200) return alert(res.message)
                    console.log(res);
                    
                }
            })
            

        }
    </script>
    
</body>
</html>